<!-- 搜索联系人 -->

<script lang="ts" setup>
import type { TreeInstance } from 'element-plus';

import type { VbenFormProps } from '@vben/common-ui';

import type { VxeGridProps } from '#/adapter/vxe-table';
import type { User } from '#/api';

import { nextTick, ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeptTreeList, getUserList } from '#/api';

import { useColumns, useSchema } from './data';

interface Tree {
  [key: string]: any;
}

const [SearchModal, searchModalApi] = useVbenModal({
  class: 'w-[900px] h-[500px]',
  closeOnClickModal: false,
  onCancel() {
    searchModalApi.close();
  },
  onConfirm() {
    searchModalApi.setData(searchGridApi.grid.getRadioRecord());
    searchModalApi.close();
  },
});

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  wrapperClass: 'grid-cols-2',
  schema: useSchema(),

  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '搜索',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<User.Row> = {
  columns: useColumns(),

  // 虚拟滚动配置项
  virtualYConfig: { enabled: true },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    // 每页显示数量选择
    pageSizes: [5, 10, 20, 50, 100],
    layouts: [
      'Total',
      'Sizes',
      'PrevJump',
      'PrevPage',
      'Number',
      'NextPage',
      'NextJump',
      'FullJump',
    ],
    align: 'right',
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        formValues.deptId = treeRef.value?.getCurrentKey();
        const res = await getUserList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        return { items: res.rows, total: res.total };
      },
    },
  },

  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    custom: true,
    zoom: true,
    refresh: { code: 'query' },
  },
};

const [SearchGrid, searchGridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
/* 树形控件 */
const filterText = ref('');
const treeRef = ref<TreeInstance>();

const defaultProps = {
  children: 'children',
  label: 'label',
};
const data = ref<Tree[]>([]);
getDeptTreeList().then((res) => {
  data.value = res.data;
  nextTick(() => {
    treeRef.value?.filter('');
  });
});

watch(filterText, (val) => {
  // eslint-disable-next-line unicorn/no-array-callback-reference
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};

async function handleNodeClick(data: Tree) {
  searchGridApi.formApi.getValues().then((res) => {
    res.deptId = data.id;
    searchGridApi.query(res);
  });
}
</script>
<template>
  <SearchModal title="人员选择" centered>
    <div class="vp-raw flex w-full gap-2">
      <div class="ml-2 mt-2">
        <el-input
          v-model="filterText"
          class="mb-2 w-[100%]"
          placeholder="请输入部门名称"
        />
        <el-tree
          ref="treeRef"
          node-key="id"
          style="height: 100%"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          highlight-current
        />
      </div>
      <div class="flex-1">
        <SearchGrid />
      </div>
    </div>
  </SearchModal>
</template>
